<template>
    <div>
        <Layout>
            <div slot="main">
                <el-button @click="$router.push('/document/add')">新建文档</el-button>
                <el-table
                    :data="tableData"
                    style="width: 100%">
                    <el-table-column
                        prop="name"
                        label="名称"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="phone"
                        label="归属"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="type"
                        label="类别">
                    </el-table-column>
                    <el-table-column
                        prop=""
                        label="操作">
                        <template slot-scope="scope">
                            <el-button @click="deleteData(scope.row)" type="text" size="small">删除</el-button>
                            <el-button @click="detail(scope.row)" type="text" size="small">查看</el-button>
                        </template>
                    </el-table-column>
                    </el-table>
            </div>
        </Layout>
    </div>
</template>
<script>
import Layout from '../../components/Layout.vue'
export default {
    components: {
        Layout
    },
    data() {
        return {
            tableData: []
        }
    },
    created() {
        this.getData()
    },
    methods: {
        getData() {
            this.$axios.get('/api/doc/list').then(res => {
                if (res.data.code === 1) {
                    this.tableData = res.data.data
                } else {
                    alert(res.data.msg)
                }
            })
        },
        deleteData(row) {
            this.$axios.delete('/api/doc/delete', {
                data: {
                    id: row.id
                }
            }).then(res => {
                if (res.data.code === 1) {
                    // 删除成功，重新获取数据
                    this.getData()
                } else {
                    alert(res.data.msg)
                }
            })
        },
        detail(row) {
            this.$router.push(`/document/detail?id=${row.id}`)
        }
    },

}
</script>
<style lang="scss">
    .form {
        width: 500px;
    }
    
</style>